<template>
	<view class="wap">
		<view class="search">
			<view class="search-text flex-y-center">
				<view class="search-input flex">
					<image class="search-img" src="@/static/img/sousuo.png"></image>
					<input style="width: 80%;" v-model="kwd" placeholder="请输入搜索关键词" maxlength="20">
					</input>
				</view>
				<view class="search-botton" @click="search()">搜索</view>
			</view>
		</view>
		<view class="history" v-if="history_list.length">
			<view class="history-ls">历史记录：</view>
			<view class="history-record">
				<view @click="listSearch(item.content)" v-for="(item,index) in history_list" :key="index" class="record">{{item.content}}</view>
			</view>
			<view style="margin-top: 50px;">
				<view class="empty" @click="clearHistory()">清空历史记录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kwd:'',
				history_list:[],
			}
		},
		onShow() {
			let history_list = uni.getStorageSync('UserHistory');
			this.history_list = history_list||[]
		},
		methods: {
			
		search(e){
			this.addUserHistory();
			uni.navigateTo({
				url:'/pages/searchList/index?kwd='+this.kwd
			})
		},
				
				
	  //清空历史记录
	  clearHistory:function(){
		  let that = this;
		  if(!that.history_list.length)return;
		  uni.showModal({
			title: '提示',
			content: '确认清空搜索记录吗？',
			success: (res)=> {
			  if (res.confirm) {
				uni.showToast({
					title:'已清空',
					icon:'success'
				})
				uni.setStorageSync('UserHistory',[]);
				that.history_list = [];
			  } else if (res.cancel) {
				console.log('用户点击取消')
			  }
		
			}
		  })
		},
				
		//历史记录搜索
		listSearch:function(kwd){
		  uni.navigateTo({
			url:'/pages/searchList/index?kwd='+kwd
		  })
		},
		//添加用户的历史记录
		addUserHistory:function(){
		  let that = this;
		  if (!that.kwd) return;
		  console.log('UserHistory');
		  let history_list = uni.getStorageSync('UserHistory') || []
		  let key = -1;
		  for (var i = 0; i < history_list.length; i++) {
			if (history_list[i].content === that.kwd) {
			  history_list.splice(i, 1);
			  break;
			}
		  }
		  if (key>-1) {
			history_list.unshift(key);
		  } else {//第一位
			history_list = [{'content':that.kwd}].concat(history_list)
		  }
		  //只保留前20
		  history_list.splice(20)
		  console.log(history_list)
		  uni.setStorageSync('UserHistory',history_list)
			},
		}
	}
</script>

<style>
	page {
		background: #f7f8f9;
	}

	.wap .search {
		margin: 10px 15px
	}

	.wap .search .search-text .search-input {
		flex: 1;
		border: 1px solid #ff8546;
		padding: 5px 2px;
		border-radius: 20px;
		font-size: 28rpx
	}

	.wap .search .search-img {
		width: 40rpx;
		height: 40rpx;
	}

	.wap .search .search-botton {
		position: absolute;
		right: 15px;
		background-color: #ff8546;
		width: 75px;
		padding: 1px 0px;
		border-radius: 20px;
		text-align: center;
		line-height: 35px;
		font-size: 28rpx;
		z-index: 999;
		color: #fff
	}

	.wap .history {
		margin: 10px 15px
	}

	.wap .history .history-ls {
		margin-top: 15px;
		margin-bottom: 5px
	}

	.wap .history .history-record {
		width: 100%;
		display: flex;
		flex-wrap: wrap
	}

	.wap .history .history-record .record {
		background: #fff;
		text-align: center;
		padding: 5px 5px;
		border-radius: 4px;
		margin-top: 10px;
		font-size: 24rpx;
		margin-left: 10px
	}

	.wap .empty {
		margin-top: 50px;
		width: 125px;
		background-color: #e3e3e3;
		padding: 5px 0px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		font-size: 12px;
		border-radius: 6px
	}
</style>
